import { addClass, removeClass } from "@/assets/js/dom";
import { mapGetters, mapActions } from "vuex";
import template from "./regTemplate";
const { render, staticRenderFns } = template;

export default {
  render,
  staticRenderFns,
  data() {
    return {
      //账号验证
      verifyUserName: function (value) {
        return {
          valid: /^[0-9a-z]{6,15}$/i.test(value),
          msg: "请输入6-15位且必须包含英文和数字的账号",
        };
      },
      verifyPsd: function (value) {
        return {
          valid: /^(?![^a-zA-Z]+$)(?!\D+$).{6,15}$/.test(value),
          msg: "请输入6-15位且必须包含英文和数字的密码",
        };
      },
      verifyQQ: function (value) {
        return {
          valid: /^[1-9]{1}[0-9]{4,}$/.test(value),
          msg: "输入的QQ号码格式错误！",
        };
      },
      verifyWeixin: function (value) {
        return {
          valid: /^[a-zA-Z0-9_-]{3,30}$/.test(value),
          msg: "输入的微信格式错误！",
        };
      },
      verifyMobile: function (value) {
        return {
          valid: /^[0-9]{11}$/.test(value),
          msg: "输入的手机号码格式错误！",
        };
      },
      verifyEmail: function (value) {
        return {
          valid: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(
            value
          ),
          msg: "输入的邮箱格式错误！",
        };
      },
      verifyUserName: function (value) {
        return {
          valid: /^[0-9a-z]{6,15}$/i.test(value),
          msg: "请输入6-15位且必须包含英文和数字的账号",
        };
      },
      // verifyReferrercode: function (value) {
      // 	return {
      // 		valid: /^[0-9a-z]{6,15}$/i.test(value),
      // 		msg: '请输入6-15位且必须包含英文和数字的账号'
      // 	}
      // },

      //注册信息
      userName: "",
      psd: "",
      confirmPsd: "",
      qq: "",
      weixin: "",
      mobile: "",
      email: "",
      realname: "",
      register: "",
      referrerCode: "",

      OptionalItems: {}, //注册选项是否显示
      Optstate: null, //1表示必填 0表示选填
      referrer: "",
      pid: null,
      type: null,
      codeUrl: "",

      btnLoading: false,

      linkUrl: "",
    };
  },
  mounted() {
    this.type = this.$route.query.type;
  },
  created() {
    this.browserRedirect();

    this.verificationCode();
    // 注册QQ 微信 手机 邮箱 是否显示必填
    this.pid = this.$route.query.pid;
    var params = {
      id: this.pid ? this.pid : "",
    };
    this.$vux.loading.show();
    this.$http
      .post(this.urlRequest + "?m=api&c=trend&a=getRegInfo", params)
      .then((res) => {
        this.$vux.loading.hide();
        if (res.status == 0) {
          this.OptionalItems = res.register;
          this.referrerCode = res.username;
          if (res.state == 0) {
            this.Optstate = false;
          } else {
            this.Optstate = true;
          }
        }
      });
  },
  computed: {
    ...mapGetters(["platformConfig"]),
  },
  methods: {
    ...mapActions(["SET_USER_INFO_DATA", "SET_ACCOUNT_DATA"]),
    browserRedirect() {
      //区分PC、H5
      let sUserAgent = navigator.userAgent.toLowerCase();
      let bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
      let bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
      let bIsMidp = sUserAgent.match(/midp/i) == "midp";
      let bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
      let bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
      let bIsAndroid = sUserAgent.match(/android/i) == "android";
      let bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
      let bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
      if (
        bIsIpad ||
        bIsIphoneOs ||
        bIsMidp ||
        bIsUc7 ||
        bIsUc ||
        bIsAndroid ||
        bIsCE ||
        bIsWM
      ) {
        console.log("pcmobile");
      } else {
        this._getLinkUrl();
        console.log("pcweb");
      }
    },
    _getLinkUrl() {
      if (this.$route.query.pid && this.$route.query.type) {
        this.linkUrl =
          this.imgRequest +
          "/pcweb/index.html#/reg?pid=" +
          this.$route.query.pid +
          "&type=" +
          this.$route.query.type;
      } else {
        this.linkUrl = this.imgRequest + "/pcweb/index.html#/reg";
      }
      console.log("链接地址：", this.linkUrl);
      window.open(this.linkUrl, "_self");
    },
    eyeOnOff(e) {
      //查看密码
      var el = e.currentTarget;
      var selfType = this.$refs.psd.$el.getElementsByTagName("input")[0];
      var parentType = this.$refs.confirmPsd.$el.getElementsByTagName(
        "input"
      )[0];
      if (selfType.type == "password" && parentType.type == "password") {
        addClass(el, "eyeOn");
        removeClass(el, "eyeOff");
        selfType.type = "text";
        parentType.type = "text";
      } else {
        addClass(el, "eyeOff");
        removeClass(el, "eyeOn");
        selfType.type = "password";
        parentType.type = "password";
      }
    },
    verificationCode() {
      //点击刷新验证码
      var timestamp = new Date().getTime();
      this.codeUrl =
        this.imgRequest + "?m=web&c=user&a=validatecode&time=" + timestamp;
    },
    registerNow() {
      //立即注册
      if (!this.userName) {
        this.$refs.userName.focus();
        this.$vux.toast.show({
          text: "账号不能为空",
        });
        return false;
      }
      if (!/^[0-9a-z]{6,15}$/i.test(this.userName)) {
        this.$refs.userName.focus();
        this.$vux.toast.show({
          text: "请输入6-15位且必须包含英文和数字的账号",
        });
        return false;
      }
      if (!this.psd) {
        this.$refs.psd.focus();
        this.$vux.toast.show({
          text: "密码不能为空",
        });
        return false;
      }
      if (!/^(?![^a-zA-Z]+$)(?!\D+$).{6,15}$/.test(this.psd)) {
        this.$refs.psd.focus();
        this.$vux.toast.show({
          text: "请输入6-15位且必须包含英文和数字的密码",
        });
        return false;
      }
      if (!this.confirmPsd) {
        this.$refs.confirmPsd.focus();
        this.$vux.toast.show({
          text: "请输入确认密码",
        });
        return false;
      }
      if (this.psd != this.confirmPsd) {
        this.$refs.confirmPsd.focus();
        this.$vux.toast.show({
          text: "两次密码输入不一致",
        });
        return false;
      }
      if (this.OptionalItems.qq) {
        if (this.Optstate && !this.qq) {
          this.$refs.qq.focus();
          this.$vux.toast.show({
            text: "QQ不能为空",
          });
          return false;
        }
        // if (!/^[1-9]{1}[0-9]{4,}$/.test(this.qq)) {
        // 	this.$refs.qq.focus();
        // 	this.$vux.toast.show({
        // 		text: '输入的QQ号码格式错误！'
        // 	})
        // 	return false
        // }
      }
      if (this.OptionalItems.weixin) {
        if (this.Optstate && !this.weixin) {
          this.$refs.weixin.focus();
          this.$vux.toast.show({
            text: "微信不能为空",
          });
          return false;
        }
        // if (!/^[a-zA-Z0-9_-]{3,30}$/.test(this.weixin)) {
        // 	this.$refs.weixin.focus();
        // 	this.$vux.toast.show({
        // 		text: '输入的微信格式错误！'
        // 	})
        // 	return false
        // }
      }
      if (this.OptionalItems.mobile) {
        if (this.Optstate && !this.mobile) {
          this.$refs.mobile.focus();
          this.$vux.toast.show({
            text: "手机号码不能为空",
          });
          return false;
        }
        if (this.Optstate && !/^[0-9]{11}$/.test(this.mobile)) {
          this.$refs.mobile.focus();
          this.$vux.toast.show({
            text: "输入的手机号码格式错误！",
          });
          return false;
        }
      }
      if (this.OptionalItems.email) {
        if (this.Optstate && !this.email) {
          this.$refs.email.focus();
          this.$vux.toast.show({
            text: "邮箱不能为空",
          });
          return false;
        }
        if (
          this.Optstate &&
          !/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)
        ) {
          this.$refs.email.focus();
          this.$vux.toast.show({
            text: "输入的邮箱格式错误！",
          });
          return false;
        }
      }
      if (this.OptionalItems.realname) {
        if (this.Optstate && !this.realname) {
          this.$refs.realname.focus();
          this.$vux.toast.show({
            text: "真实姓名不能为空",
          });
          return false;
        }
      }
      if (this.OptionalItems.register) {
        if (this.Optstate && !this.register) {
          this.$refs.register.focus();
          this.$vux.toast.show({
            text: "验证码不能为空",
          });
          return false;
        }
      }
      var params = {
        username: this.userName,
        password: this.psd,
        password2: this.confirmPsd,
        qq: this.qq,
        weixin: this.weixin,
        mobile: this.mobile,
        email: this.email,
        realname: this.realname,
        register: this.register,
        flag: "3",
        code: "123",
        type: this.type ? this.type : "1",
        referrer: this.referrerCode,
      };
      console.log(params);
      this.btnLoading = true;
      this.$http
        .post(this.urlRequest + "?m=api&c=user&a=reg", params)
        .then((res) => {
          this.btnLoading = false;
          if (res.status == 0) {
            localStorage.setItem("token", res.token);
            localStorage.setItem("isUser", true);
            localStorage.setItem("isLogin", "1"); //公告签到状态
            //注册成功就登录存userInfo
            this.$http
              .post(this.urlRequest + "?m=api&c=user&a=userInfo", {
                token: res.token,
              })
              .then((res) => {
                this.SET_USER_INFO_DATA({
                  Obj: res.data,
                });
              });
            this.SET_ACCOUNT_DATA({
              Obj: {},
            });
            this.$vux.toast.show({
              text: "注册成功",
            });
            this.$router.push({
              path: "/home",
              name: "Home",
            });
          } else if (res.status == 1713) {
            //校验账号是否存在
            this.$refs.userName.focus();
            if (res.ret_msg && res.ret_msg != "") {
              this.$vux.toast.show({
                text: res.ret_msg,
              });
            }
          } else if (res.status == 100022) {
            //校验推荐人
            this.$refs.regReferrerCode.focus();
            if (res.ret_msg && res.ret_msg != "") {
              this.$vux.toast.show({
                text: res.ret_msg,
              });
            }
          } else {
            if (res.ret_msg && res.ret_msg != "") {
              this.$vux.toast.show({
                text: res.ret_msg,
              });
            }
          }
        })
        .catch((error) => {
          this.btnLoading = false;
          this.$vux.toast.show({
            text: "数据请求超时",
          });
        });
    },
  },
  watch: {},
};

// WEBPACK FOOTER //
// ./src/components/reg/reg.vue
